<%--
  Created by IntelliJ IDEA.
  User: chen
  Date: 17-8-21
  Time: 下午9:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>this is queryProduct</title>
    <script src="js/jquery-3.2.1.min.js"></script>

</head>
<div align="center" style="width: 100%">
    <h3>查询页面</h3>
    <h5>请选择查询类型,并填入提交</h5>
    <div id="_div_radio_queryBy" align="left" style="width: 10%">
        <label for="queryById">ID</label>
        <input id="queryById" type="radio" name="queryBy" checked="checked"/>
        <br />
        <label for="queryByUsername">Username</label>
        <input id="queryByUsername" type="radio" name="queryBy"/>
    </div>
    <br />
    <label for="_input_text_queryBy">请输入：</label>
    <input id="_input_text_queryBy"/>
    <br />
    <br />
    <input type="submit" id="_input_sub_queryBy" value="submit"/>
    <input id="_input_sub_queryAll" type="submit" value="showAll"/>
</div>
<br>
<br>
<div id="productShow" align="center" style="width: 100%">
    <table id="_table_products" cellspacing="0px" width="60%">
        <thead>
            <tr>
                <td>ID</td>
                <td>Name</td>
                <td>Price</td>
                <td>delete</td>
                <td>edit</td>
            </tr>
        </thead>
    </table>
</div>

<script type="text/javascript">
    var _input_submit_queryBy = $("input#_input_sub_queryBy");
    var  _val_queryBy;
    var _input_radio_queryById = $("input#queryById");
    var desUrl;
    var _table_product = $("table#_table_products");
    var _input_sub_queryAll = $("input#_input_sub_queryAll");

    //在没有数据的时候隐藏表格
    _table_product.hide();

    /**
     * 渲染网页效果
     * 在每次添加表格之后重新渲染td
     */
    function addAttr() {
        $("td").attr("style", "border: 1px solid black");
        $("td").attr("align", "center");
    }

    /**
     * 增加表格一行数据
     * @param id
     * @param name
     * @param price
     */
    function addTr(_id,name,price) {
        var _newTr = "<tr class='data' align='center' style='border: 1px solid black'><td>"+_id+"</td><td>"+name+"</td><td>"+price+"</td><td>" +
            "delete" +
            "</td><td>edit</td></tr>";
        _table_product.append(_newTr);
        addAttr();
    }

    function deleteClick(id) {
        $.ajax({
            //发送POST请求
            url:"deleteProduct",
            type:"POST",
            data:{
                id:id
            },
            success:function (data) {
                if(data === "success"){
                    alert("删除成功");
                }else{
                    alert("失败")
                }
            }
        });
    }


//    $("a#_a_delete").click(deleteClick($(this).attr("name")));


    /**
     * 按钮点击事件
     * 点击之后按照所选queryBy查询信息
     */
    _input_submit_queryBy.click(function () {
        //删除上次查询留下的记录
        $("table#_table_products tr.data").remove();

        _val_queryBy = $("input#_input_text_queryBy").val();
        //判断单选按钮按钮有没有被选中
        if(_input_radio_queryById.is(":checked")){
            desUrl = "queryProductById/"+_val_queryBy;
        }else {
            desUrl = "queryProductByUsername/"+_val_queryBy;
        }
        $.ajax({
            url:desUrl,
            type:"GET",
            dataType:"json",
            success:function (data) {
                if(data.length > 0){
                    _table_product.show();
                    for(i = 0;i < data.length;i++){
                        addTr(data[i].id,data[i].name,data[i].price);
                    }
                }else {
                    _table_product.show();
                    addTr(data.id,data.name,data.price);
                }
            }
        });
    });

    _input_sub_queryAll.click(function () {
        $("table#_table_products tr.data").remove();
    });
</script>
</html>
